<template lang='pug'>
  Modal.lzw-modal-style-2(v-model="show" title="新建收费方案" fullscreen)
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120")
      Row(type="flex" justify="start" :gutter="16")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }")
          FormItem(label="收费方案类型：" prop="chargingType"  :label-width="130")
            Select.input-has-border(v-model="formValidate.chargingType"  placeholder="请选择收费类型"  @on-change="typeChange")
              Option(v-for="(item, index) in chargingTypeArr" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }")
          FormItem(label="收费方案名称：" prop="name"  :label-width="130")
            Input.input-has-border(v-model="formValidate.name" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" v-if="isFuwufei")
          FormItem.ivu-form-item-required(label="是否跟随保险收费：" :label-width="150")
            i-switch(v-model="formValidate.hasInsure")
              span(slot="open") 是
              span(slot="close") 否
    Divider.mt-0
    div
      Insure(ref="insure" 
        :isSb="isSb" 
        :isXinzi="isXinzi" 
        :formValidate="formValidate"
        @get-list="getList"
      )
    div
      Tax(ref="tax" 
        :isShuifei="isShuifei" 
        :formValidate="formValidate"
        @get-list="getList"
      )
    .card.mb-15(v-if="isFuwufei")
      
      Checkbox(v-model="fuwufeiModel1" @on-change="fuwufeiModel1Change") 按方式收费
      .ml-30
        .d-f-c.mt-20(v-if="fuwufeiModel1")
          span 收费方式：
          Select.input-has-border(v-model="fuwufeiValue"  placeholder="请选择" clearable style="width:200px" @on-change="fuwufeiValueChange")
            Option(v-for="(item, index) in fuwufeiArr" :value="item.key" :key="index") {{ item.value }}
      .container.ml-30(v-show="fuwufeiModel1")
        Yearly(
          v-show="this.fuwufeiValue === 2"
          ref="yearly"
          :fuwufeiModel1="fuwufeiModel1"
          :commonDate="formValidate"
          :value="typeValue"
          :SFFirst="SFFirst"
          :rateDetails="rateData"
          @get-list="getList"
        )
        Salary(
          v-show="this.fuwufeiValue === 4"
          ref="salary"
          :fuwufeiModel1="fuwufeiModel1"
          :commonDate="formValidate"
          :value="typeValue"
          :SFFirst="SFFirst"
          :rateDetails="rateData"
          @get-list="getList"
        )
        Count(
          v-show="this.fuwufeiValue === 8"
          ref="count"
          :fuwufeiModel1="fuwufeiModel1"
          :commonDate="formValidate"
          :value="typeValue"
          :SFFirst="SFFirst"
          :rateDetails="rateData"
          @get-list="getList"
        )
        Type(
          v-show="this.fuwufeiValue === 16"
          ref="type"
          :fuwufeiModel1="fuwufeiModel1"
          :commonDate="formValidate"
          :value="typeValue"
          :SFFirst="SFFirst"
          :rateDetails="rateData"
          @get-list="getList"
        )
        CombiningType(
          v-show="this.fuwufeiValue === 32"
          ref="combiningType"
          :fuwufeiModel1="fuwufeiModel1"
          :commonDate="formValidate"
          :value="typeValue"
          :SFFirst="SFFirst"
          :rateDetails="rateData"
          @get-list="getList"
        )
        .base-amt(v-show="this.fuwufeiValue === 128")
          RadioGroup(v-model="chooseBaseAmtIndex")
            .input-h24.mt-15(v-for="(item, index) in baseAmt" :key="index")
              Radio(:label="index")
                span {{taxTextArr[index]}}：
                Input.input-has-border(v-model="item.rate" type="number" style="width:100px")
                span %
    .card.mb-15(v-if="isFuwufei")
      Checkbox(v-model="fuwufeiModel2" @on-change="fuwufeiModel2Change") 按金额比例收费
      .container.ml-30(v-if="fuwufeiModel2")
        .input-h24.mt-15(v-for="(item, index) in amountArr" :key="index")
          span {{taxTextArr[index]}}：
          Input.input-has-border(v-model="item.rate" type="number" style="width:100px")
          span %
        RadioGroup.mt-20(v-model="calOrder" @on-change="calOrderChange")
          Radio(label="1").mr-30 先计算税费
          Radio(label="2") 先计算服务费
    .text-center(slot="footer")
      Button(@click="cancel") 取消
      Button(type="info" @click="handleSubmit('formValidate')") 保存
</template>

<script>
import Insure from './insure.vue'
import Tax from './tax.vue'
import Yearly from './yearly.vue'
import Salary from './salary.vue'
import Count from './count.vue'
import Type from './type.vue'
import CombiningType from './combiningType.vue'
import InsureProjectApi from '@/api/InsureProject.api.js'

export default {
  name:'',
  props:{
    // show: Boolean,
  },
  data () {
    return {
      show: false,
      chargingTypeArr: [
        {key: '1', value: '社保收费方案'},
        {key: '2', value: '公积金收费方案'},
        {key: '4', value: '商保收费方案'},
        {key: '8', value: '薪资收费方案'},
        {key: '16', value: '服务费收费方案'},
        {key: '32', value: '税费收费方案'}
      ],
      // 服务费方案的数据
      f_Value: 0,
      j_Value: 0,
      typeValue: 0,
      fuwufeiModel1: false,
      fuwufeiModel2: false,
      fuwufeiValue: 0, // 服务费收费方式-默认年度总包
      // 服务费收费方式1
      fuwufeiArr: [
        {key: 2, value: '年度总包收费'},
        {key: 4, value: '按岗位工资收费'},
        {key: 8, value: '按人员数量收费'},
        {key: 16, value: '按人头收费'},
        {key: 32, value: '组合项目收费'},
        {key: 128, value: '按缴费基数收费'}
      ],
      // 按缴费基数收费
      baseAmt: [
        {category: '1', rate: 0}, 
        {category: '2', rate: 0}, 
      ],
      chooseBaseAmtIndex: 0, // 
      // 按金额比例收费
      taxTextArr:['社保', '公积金', '商保', '薪资', '税费'],
      rateData: [
        {category: '1', rate: 0}, 
        {category: '2', rate: 0}, 
        {category: '4', rate: 0}, 
        {category: '8', rate: 0},  
        {category: '32', rate: 0}
      ],
      amountArr: [
        {category: '1', rate: 0}, 
        {category: '2', rate: 0}, 
        {category: '4', rate: 0}, 
        {category: '8', rate: 0}, 
        {category: '32', rate: 0}
      ],
      calOrder: '2', // 
      SFFirst: true,


      formValidate: {
        name: '',
        chargingType: '', // 收费方案类型
        hasInsure: true
      },
      ruleValidate: {
        chargingType: [
          { required: true, message: '类型不能为空', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入方案名称', trigger: 'blur' }
        ]
      }
    }
  },

  components: {
    Insure,
    Tax,
    Yearly,
    Salary,
    Count,
    Type,
    CombiningType
  },

  computed: {
    isSb () {
      const type = ['1', '2', '4', '8']
      return type.includes(this.formValidate.chargingType)
    },
    isXinzi () {
      const type = ['1', '2', '4']
      return type.includes(this.formValidate.chargingType)
    },
    isShuifei () {
      const type = ['32']
      return type.includes(this.formValidate.chargingType)
    },
    isFuwufei () {
      const type = ['16']
      if (type.includes(this.formValidate.chargingType)) {
        return true
      } else {
        return false
      }
    },
  },

  beforeMount() {},

  mounted() {},

  methods: {
    openModal () {
      this.show = true
    },
    calOrderChange (val) {
      if (val === '1') {
        this.SFFirst = false
      } else {
        this.SFFirst = true
      }
    },
    typeChange (val) {
      this.formValidate.name = ''
    },
    getList () {
      this.show = true
      Object.assign(this.$data, this.$options.data())
      this.$refs['formValidate'].resetFields()
      this.$emit('get-list')
      // this.$refs.insure.refreshData()
      // this.$refs.tax.refreshData()
      // this.$refs.yearly.refreshData()
      // this.$refs.salary.refreshData()
      // this.$refs.count.refreshData()
      // this.$refs.type.refreshData()
      // this.$refs.combiningType.refreshData()
    },
    cancel () {
      // this.$emit('on-cancel')
      this.show = false
    },
    // 保存按钮
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          switch (this.formValidate.chargingType) {
            case '1':
              this.$refs.insure.submit()
              break;
            case '2':
              console.log(2)
              this.$refs.insure.submit()
              break;
            case '4':
              this.$refs.insure.submit()
              break;
            case '8':
              this.$refs.insure.submit()
              break;
            case '16':
              this.saveFuWuFn()
              console.log('16')
              break;
            case '32':
              console.log('32')
              this.$refs.tax.submit()
              break;
          }
        } else {
          this.$Message.warning('有必填项未填!')
        }
      })
    },
    // 保存服务费方案
    saveFuWuFn () {
      if (this.fuwufeiModel1 || this.fuwufeiModel2) {
        console.log(this.fuwufeiValue)
        switch (this.fuwufeiValue) {
          case 0:
            this.biliSubmit()
            break;
          case 2:
            this.$refs.yearly.submit()
            break;
          case 4:
            this.$refs.salary.submit()
            break;
          case 8:
            this.$refs.count.submit()
            break;
          case 16:
            this.$refs.type.submit()
            break;
          case 32:
            this.$refs.combiningType.submit()
            break;
          case 128:
            this.baseAmtSubmit()
            break;
        }
      } else {
        this.$Message.warning('请选择服务费收费方式')
      }
    },
    fuwufeiValueChange (val) {
      if (val) {
        this.f_Value = val
      } else {
        this.f_Value = 0
      }
      this.typeValue = this.f_Value + this.j_Value
    },
    fuwufeiModel1Change (val) {
      if (val) {
        this.fuwufeiValue = 2
        this.f_Value = 2
      } else {
        this.fuwufeiValue = 0
        this.f_Value = 0
      }
      this.typeValue = this.f_Value + this.j_Value
    },
    fuwufeiModel2Change (val) {
      if (val) {
        this.rateData = this.amountArr
        this.j_Value = 1
      } else {
        this.rateData = [
          {category: '1', rate: 0}, 
          {category: '2', rate: 0}, 
          {category: '4', rate: 0}, 
          {category: '8', rate: 0}, 
          {category: '32', rate: 0}
        ]
        this.j_Value = 0
      }
      this.typeValue = this.f_Value + this.j_Value
    },
    // 按缴费基数收费
    baseAmtSubmit () {
      InsureProjectApi.PostByBaseAmtSFProject({
        Name: this.formValidate.name,
        Type: this.typeValue,
        FollowInsure: this.formValidate.hasInsure,
        Details: [this.baseAmt[this.chooseBaseAmtIndex]],
        RateDetails: this.rateData,
        SFFirst: this.SFFirst
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
          this.refreshData()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 只选按金额比例收取服务费时
    biliSubmit () {
      InsureProjectApi.PostYearlySFProject({
        Name: this.formValidate.name,
        Type: this.typeValue,
        FollowInsure: this.formValidate.hasInsure,
        Details: [],
        RateDetails: this.rateData,
        SFFirst: this.SFFirst
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
          this.refreshData()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 重置数据
    refreshData () {
      Object.assign(this.$data, this.$options.data())
    }
  },

  watch: {}

}

</script>
<style lang="less">
  .capitation-li {
    display: inline-block;
    .ivu-input-wrapper{
      vertical-align: baseline;
    }
    .ivu-input{
      height: 24px;
    }
  }
  .input-h24{
    .ivu-select .ivu-select-selection{
      height: 24px;
      .ivu-select-placeholder{
        height: 24px;
        line-height: 24px;
      }
      .ivu-select-selected-value{
        line-height: 24px;
      }
    }
    .ivu-input-wrapper{
      vertical-align: baseline;
    }
    .ivu-input{
      height: 24px;
    }
  }
  
</style>
<style lang='less' scoped>
  .card{
    display: block;
    border: 1px solid #dcdee2;
    padding: 16px;
    border-radius: 4px;
  }
</style>